<template>
  <div class="bcg sublist_box">
    <header-comm></header-comm>
    <div class="hedlist">
      <div class="headbtn">
        <a-button type="primary" class="editable-add-btn">
          <router-link to="/Merchantentry">新增二级商户进件</router-link>
        </a-button>
      </div>
      <div class="right_ser">
        <div class="sqzt_box">
          <a-select
            show-search
            placeholder="请输入要搜索的状态"
            option-filter-prop="children"
            style="width: 200px"
            allowClear
            @change="handleChange"
          >
            <a-select-option value="完成">完成</a-select-option>
            <a-select-option value="审核中">审核中</a-select-option>
            <a-select-option value="待账户验证">待账户验证</a-select-option>
            <a-select-option value="待签约">待签约</a-select-option>
            <a-select-option value="已驳回">已驳回</a-select-option>
          </a-select>
        </div>
        <div class="head_search">
          <div class="sele">
            <a-input placeholder="请输入关键字查询" v-model="xlpp" @change="xlchange" style="width: 200px" />
            <a-icon type="search" class="search" />
          </div>
        </div>
      </div>
    </div>
    <div class="shgl">
      <div>
        <a-table
          @change="getshglList"
          :loading="loading"
          :dataSource="dataSource"
          :pagination="pagination"
          :columns="columns"
        >
          <template slot="applyment_state" slot-scope="text, record">
            <div>{{record.applyment_state_desc}}</div>
          </template>
          <template slot="Poundage" slot-scope="text, record">
            <div>
              <a-input-number
                :default-value="text"
                :min="0"
                :max="30"
                :formatter="value => `${value}%`"
                :parser="value => value.replace('%', '')"
                @focus="yjblfocus(record)"
                @change="yjblChange"
                :precision="0"
              />
            </div>
          </template>
          <!-- <template slot="available_amount" slot-scope="text, record">
            <div>{{text}}</div>
          </template>
           <template slot="pending_amount" slot-scope="text, record">
            <div>{{text}}</div>
          </template>-->

          <!-- <template slot="show_user_info" slot-scope="text, record">
            <div>
              {{text}}
              {{record.show_user_info}}
              <a-switch
                @change="switchcheck"
                @click="switchclick(record)"
                checked-children="显示"
                un-checked-children="不显示"
                :defaultChecked="record.show_user_info=='是'?true:false"
              />
            </div>
          </template>-->
          <template slot="operation" slot-scope="text, record">
            <div class="editable-row-operations">
              <span>
                <!-- to="/Merchantentry?edit=ok" -->

                <a class="del" @click="()=>edit(record)">进件</a>
                <a
                  class="del"
                  :disabled="record.applyment_state=='FINISH'?true:false"
                  @click="()=>onlkzt(record)"
                >查状态</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  :disabled="record.applyment_state=='FINISH'?true:false"
                  title="确定删除吗?"
                  class="cz"
                  @confirm="() => onDelete(record.id_num,record.key)"
                >
                  <a>删除</a>
                </a-popconfirm>
                <a
                  class="del"
                  :disabled="record.applyment_state!='FINISH'?true:false"
                  @click="()=>seachye(record)"
                >余额</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  :disabled="record.applyment_state!='FINISH'?true:false"
                  title="确定提现吗?"
                  class="cz"
                  @confirm="() => getcash(record)"
                >
                  <a>提现</a>
                </a-popconfirm>
                <span class="del" @click="txjltk(record)">明细</span>
              </span>
            </div>
          </template>
        </a-table>
        <!-- <a-modal title="请截图 让商户法人用微信扫码打开，完成账户验证" v-model="visible" @ok="handleOk">
          <p>
            <img :src="qrcode" alt />
          </p>
        </a-modal>-->

        <!-- <a-button type="primary" @click="showModal">Open Modal</a-button> -->
        <a-modal v-model="visible" title="请截图 让商户法人用微信扫码打开，完成账户验证" @ok="handleOk">
          <p>
            <img :src="qrcode" alt />
          </p>
        </a-modal>

        <a-modal v-model="visiblezt" :title="msg" @ok="handleOk">
          <p>
            <span class="mod_tit">汇款截止时间：</span>
            {{content.deadline}}
          </p>
          <p>
            <span class="mod_tit">收款账户的开户银行名称：</span>
            {{content.destination_account_bank}}
          </p>
          <p>
            <span class="mod_tit">收款账户名：</span>
            {{content.destination_account_name}}
          </p>
          <p>
            <span class="mod_tit">收款卡号：</span>
            {{content.destination_account_number}}
          </p>
          <p>
            <span class="mod_tit">汇款金额：</span>
            ￥{{content.pay_amount/100}}
          </p>
          <p>
            <span class="mod_tit">备注信息：</span>
            {{content.remark}}
          </p>
        </a-modal>
      </div>
    </div>
    <div class="txjl_box_tk">
      <txjltk v-if="txjltkflg"></txjltk>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import headerComm from "../header-comm/header.vue";
import txjltk from "./txjl.vue";
import { setTimeout } from "timers";

const dataSource = [];
const columns = [
  {
    title: "企业编号",
    dataIndex: "sqdwid",
    scopedSlots: { customRender: "sqdwid" }
  },
  {
    title: "公司名称",
    dataIndex: "merchant_name",
    scopedSlots: { customRender: "merchant_name" }
  },

  // {
  //   title: "业务申请编号",
  //   dataIndex: "out_request_no",
  //   scopedSlots: { customRender: "out_request_no" }
  // },
  // {
  //   title: "微信支付申请单号",
  //   dataIndex: "applyment_id",
  //   scopedSlots: { customRender: "applyment_id" }
  // },
  {
    title: "申请状态",
    dataIndex: "applyment_state",
    scopedSlots: { customRender: "applyment_state" }
  },
  {
    title: "二级商户号",
    dataIndex: "sub_mchid",
    scopedSlots: { customRender: "sub_mchid" }
  },
  {
    title: "可用资金",
    dataIndex: "available_amount",
    scopedSlots: { customRender: "available_amount" }
  },
  {
    title: "冻结资金",
    dataIndex: "pending_amount",
    scopedSlots: { customRender: "pending_amount" }
  },
  {
    title: "佣金比例",
    dataIndex: "Poundage",
    scopedSlots: { customRender: "Poundage" }
  },
  // {
  //   title: "卖家信息",
  //   dataIndex: "show_user_info",
  //   scopedSlots: { customRender: "show_user_info" }
  // },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  inject: ["reload"],
  data() {
    this.cacheData = dataSource.map(item => ({ ...item }));
    return {
      dataSource,
      columns,
      //count: 2
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0
      },
      loading: true,
      xlpp: "",
      qrcode: "",
      visible: false,
      visiblezt: false,
      available_amount: "*****",
      pending_amount: "*****",
      txjlval: "",
      txjltkflg: false,
      yjbl_idnum: "",
      content: "",
      msg: "",
      switchval: "",
      zt_type:''
    };
  },
  components: {
    headerComm,
    txjltk
  },
  methods: {
    xlchange(e) {
      this.xlpp = e.target.value;
      this.getshglList(this.pagination, this.xlpp);
    },
    yjblfocus(value) {
      console.log(value);
      this.yjbl_idnum = value.id_num;
    },
    yjblChange(value) {
      this.axios
        .post(
          "wxpay/PoundageEdit.php",
          qs.stringify({
            id_num: this.yjbl_idnum,
            poundage: value
          })
        )
        .then(res => {
          console.log(res);
        });
    },
    //删除
    onDelete(id, key) {
      this.axios
        .post(
          "wxpay/delSubUserbyId.php",
          qs.stringify({
            id_num: id
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            //删除成功,总条数减1
            this.pagination.total = this.pagination.total - 1;
            const dataSource = [...this.dataSource];
            this.dataSource = dataSource.filter(item => item.key !== key);
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    txjltk(value) {
      console.log(value);
      this.txjlval = value;
      this.txjltkflg = true;
    },
    //商户管理--列表
    getshglList(pagination, ggpp) {
      this.axios
        .post(
          "wxpay/subUserList.php",
          qs.stringify({
            pageSize: pagination.defaultPageSize,
            phone: this.$store.state.bbl_phone,
            sqdwid: this.$store.state.bbl_sqdwid,
            page: pagination.current,
            keywords: this.xlpp,
            type:this.zt_type
          })
        )
        .then(res => {
          console.log(res);
          this.loading = false;
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            this.dataSource = res.data.result.data;

            for (var i = 0; i < res.data.result.data.length; i++) {
              this.dataSource[i].key = i;
              this.dataSource[i].show_user_info = res.data.result.data[
                i
              ].show_user_info.trim();
              this.dataSource[i].Poundage = Number(this.dataSource[i].Poundage);
              this.dataSource[i].available_amount = "*****";
              this.dataSource[i].pending_amount = "*****";
            }
          } else {
            this.dataSource = [];
          }
        });
    },

    handleChange(value) {
      console.log(value);
      this.zt_type= value;
      this.getshglList(this.pagination);
      // const newData = [...this.dataSource];
      // const target = newData.filter(item => key === item.key)[0];
      // if (target) {
      //   target[column] = value;
      //   this.dataSource = newData;
      // }
    },
    seachye(value) {
      console.log(value);
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/fundBalanceQuery.php",
          qs.stringify({
            sub_mchid: value.sub_mchid
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            value.available_amount =
              "￥" + res.data.result.available_amount / 100;
            value.pending_amount = "￥" + res.data.result.pending_amount / 100;
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },

    //提现
    getcash(value) {
      //查询可用金额
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/fundBalanceQuery.php",
          qs.stringify({
            sub_mchid: value.sub_mchid
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            //获取可用金额
            let amount = res.data.result.available_amount;
            //调用提现接口
            if (!amount) {
              this.$notification["error"]({
                message: "失败",
                description: "无可用余额"
              });
            } else {
              this.getcashapi(value.sub_mchid, amount, res);
            }
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //是否显示卖家信息
    switchclick(value) {
      console.log(value);
      this.switchval = value;
    },
    switchcheck(value) {
      console.log(value);
      var val = "";
      if (value) {
        val = "是";
      } else {
        val = "否";
      }
      setTimeout(() => {
        this.axios
          .post(
            "wxpay/updateWebUserInfo.php",
            qs.stringify({
              id_num: this.switchval.id_num,
              type: val,
              sqdwid: this.switchval.sqdwid
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }, 500);
    },
    //调用提现接口
    getcashapi(sub_mchid, amount, res) {
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/fundwithdraw.php",
          qs.stringify({
            sub_mchid: sub_mchid,
            amount: amount
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    //修改进件信息
    edit(value) {
      console.log(value);
      sessionStorage.setItem("editvalue", JSON.stringify(value));

      this.$router.push({ path: "/Merchantentry", query: { edit: "ok" } });
      // this.$store.state.jjkhlistdata=value
    },
    onlkzt(value) {
      this.axios
        .post(
          "https://xh.bearing.cn/api/wxpay/getMerchantState.php",
          qs.stringify({
            sqdwid: value.sqdwid,
            applyment_id: value.applyment_id
          })
        )
        .then(res => {
          console.log(res);
          // var content = "";
          this.msg = res.data.msg;
          // if (res.data.msg == res.data.result.message) {
          //   content = res.data.result.message;
          // } else {
          //   this.content = res.data.result.message;
          // }
          if (res.data.code == 303) {
            // this.getshglList(this.pagination, this.xlpp);
          }

          if (res.data.result.applyment_state == "NEED_SIGN") {
            this.qrcode = res.data.result.qrcode;
            //   const modal = this.$error({
            //   title: res.data.msg,
            //   content: content
            // });
            // modal.update({
            //   content: content
            // });
            this.showModal();
          } else if (res.data.result.applyment_state == "ACCOUNT_NEED_VERIFY") {
            this.visiblezt = true;
            console.log(this.visiblezt);
            this.content = res.data.result.message;
          } else if (res.data.result.applyment_state == "AUDITING") {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
          } else if (res.data.result.applyment_state == "REJECTED") {
            this.$notification["error"]({
              message: res.data.msg,
              description: res.data.result.message
            });
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      this.visiblezt = false;
    },
    handleCancel(e) {
      console.log(e);
      this.visible = false;
      this.visiblezt = false;
    }
  },

  created() {
    this.getshglList(this.pagination);
  }
};
</script>

<style lang='less'>
.sublist_box{
.hedlist {
  position: relative;
  top: 65px;
  width: 98%;
  left: 1%;
  height: 60px;
  background-color: #fff;
  text-align: left;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  .head_search {
    .sele {
      position: relative;
      display: inline-block;
      margin: 0 10px;
      i {
        position: absolute;
        top: 22px;
        right: 8px;
        font-size: 16px;
      }
    }
  }
}
.right_ser {
  display: flex;
}
.txjl_box_tk {
  .txjl_tk {
    top: 30%;
  }
}

.shgl {
  width: 98%;
  height: auto;
  position: relative;
  top: 100px;
  left: 1%;
  // box-shadow: 0 0 5px #ccc;
  border: 1px solid #ccc;
  text-align: left;
  background-color: #fff;
  .xj {
    img {
      width: 50px;
      height: 50px;
      margin: 0 10px;
      border: 1px solid #ccc;
    }
  }

  .button {
    margin: 15px 0;
  }
  .ant-input-number-handler-wrap {
    opacity: 1 !important;
  }
}
.mod_tit {
  display: inline-block;
  width: 169px;
  text-align: right;
  font-weight: bold;
}

}
</style>
